<template>
  <div class="box-card">
    <el-container>
      <el-header height="57px" class="pass-header">
      </el-header>
      <el-main class="pass-main">
        <div class="shoot-box">
          <div class="short-text">
          <div>场均进球</div>
          <div>2.0</div>
        </div>
          <div class="short-text">
            <div>场均射门</div>
            <div>16.7</div>
          </div>
          <div class="short-text">
            <div>场均射正</div>
            <div>6.4</div>
          </div>
          <div class="long-text">
            <div>场均射门成功率</div>
            <div>11.9%</div>
          </div>
          <div class="short-text">
            <div>场均点球</div>
            <div>0.3</div>
          </div>
          <div class="short-text">
            <div>场均中柱</div>
            <div>0.46</div>
          </div>
          <div class="long-text">
            <div>场均进攻犯规</div>
            <div>3.43</div>
          </div>
          <div class="long-text">
            <div>
              <span>场均创造机会</span>
              <img src="../../../../assets/image/common/question_mark.svg" alt="">
            </div>
            <div>11.5</div>
          </div>
        </div>
        <div class="shoot-metrics">
          <div class="two-table">
            <TeamShootTable/>
            <TeamAssistTable/>
          </div>
          <div class="three-column">
            <div class="zone-type">
              <ZoneTable/>
              <TypeTable/>
            </div>
            <div class="zone-type-text">
              <div>进球区域</div>
              <div>进球类型</div>
            </div>
            <div class="goal-time">
              <TimeTable/>
            </div>
            <div class="goal-time-text">进球时间段</div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import TeamShootTable from "./Comps/TeamShootTable";
  import TeamAssistTable from "./Comps/TeamAssistTable";
  import ZoneTable from "./Comps/ZoneTable";
  import TypeTable from "./Comps/TypeTable";
  import TimeTable from "./Comps/TimeTable";
  export default {
    name: "TeamAttack",
    components:{
      TeamShootTable,
      TeamAssistTable,
      ZoneTable,
      TypeTable,
      TimeTable
    },
    data(){
      return {

      }
    }
  }
</script>

<style scoped lang="scss">
  .box-card {
    margin: auto;
    width:  1440px;
    height: 553px;
  }
  .pass-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #194568;
    padding: 0;
  }
  .pass-main {
    height: 496px;
    padding: 0;
    background-color: #F1F6F9;
    .shoot-box {
      display: flex;
      justify-content: space-around;
      width: 90%;
      height: 80px;
      /*background-color: red;*/
      margin:20px auto 0 ;
      border: 1px solid #BBBBBB;
      border-top: 3px #16C79A solid;
      .short-text {
        width: 100px;
        height: 100%;
        font-size: 20px;
        font-weight: bold;
        /*background-color: #01538B;*/
        div:first-child {
          width: 100%;
          height: 40%;
          /*background-color: #B500FE;*/
          line-height: 32px;
        }
        div:last-child {
          width: 100%;
          height: 60%;
          font-size: 36px;
          line-height: 48px;
          /*background-color: lawngreen;*/
        }
      }
      .long-text {
        width: 140px;
        height: 100%;
        font-size: 20px;
        font-weight: bold;
        /*background-color: saddlebrown;*/
        div:first-child {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 40%;
          /*background-color: #B500FE;*/
          line-height: 32px;
          img {
            width: 20px;
            height: 20px;
          }
        }
        div:last-child {
          width: 100%;
          height: 60%;
          font-size: 36px;
          line-height: 48px;
          /*background-color: lawngreen;*/
        }
      }
    }
    .shoot-metrics {
      display: flex;
      justify-content: space-between;
      width: 90%;
      height: 360px;
      margin: 10px auto 0;
      /*background-color: red;*/
      .two-table {
        display: flex;
        justify-content: space-between;
        width: 48%;
        height: 100%;
        /*background-color:darkgoldenrod;*/
      }
      .three-column {
        width: 49%;
        height: 100%;
        /*background-color: blue;*/
        .zone-type {
          width: 100%;
          height: 43%;
          display: flex;
          justify-content: space-between;
          /*background-color: #9a6e3a;*/
        }
        .zone-type-text {
          display: flex;
          justify-content: space-between;
          width: 100%;
          height: 7%;
          /*background-color: red;*/
          div {
            width: 275px;
            height: 100%;
            line-height: 25px;
            font-size: 20px;
            font-weight: bold;
            color: rgba(101, 111, 115, 0.75);
            /*background-color: #01538B;*/
          }
        }
        .goal-time {
          width: 100%;
          height: 43%;
          /*background-color: #4EA3DD;*/
        }
        .goal-time-text {
          width: 100%;
          height: 7%;
          line-height: 25px;
          font-size: 20px;
          font-weight: bold;
          color:rgba(101, 111, 115, 0.75);
        }
      }
    }
  }

</style>